<template>
	<view>
		<view class="wx-auth" v-if="canIUse">
			<view class="top">
				<view class="header"><image src="../../static/logo.png"></image></view>
				<!-- <view class="content2">
					<view class="text-size-max">申请获取以下权限</view>
					<text>获得您的公开信息(昵称，头像等)</text>
				</view> -->
				<view class="btn">
					<!-- <button  class='cancel-login' type='default' lang="zh_CN" @click="cancle()">
						暂不登录
					</button> -->
<!-- 					<button class="btn-get-phone" open-type="getPhoneNumber"  @click="getcode" @getphonenumber="getPhoneNumber" v-if="isGetPhone == true">一键绑定手机号登录</button> -->
					
					<!-- <button class="btn-auth" open-type="getUserInfo" lang="zh_CN" @getuserinfo="bindGetUserInfo" v-else>微信一键登录/注册</button> -->
					<button class="btn-auth" type='primary' @click="getcode" v-if="radioValue==0" withCredentials="true" >手机号快捷登录/注册</button>
				   <button class="btn-auth" type='primary' v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" >手机号快捷登录/注册</button>
				
				 <!--  <button class="btn-auth" v-else type='primary' @click="getcode" >手机号快捷登录/注册1</button> -->
				
				</view>
			</view>
			<view class="bottom">
		<!-- 		<view class="other-login">
					<text class="title" @click="phoneLogin()">其他登录方式</text>
					<text class="iconfont icon-youxiang" @click="phoneLogin()" style="font-size:40upx"></text>
				</view> -->
				<view class="agreement">
					<radio-group @change="radioGroup" ><radio color="#ffaa7f"   :value="1" :checked="radioValue" style="transform:scale(0.9);"></radio></radio-group>
					<view class="agreement2">
						已阅读并同意
						<text class="agreement-text"  @click="toTerms">用户协议</text>
						和
						<text class="agreement-text" @click="toPrivacy">隐私政策</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else>请升级微信版本</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			//判断小程序的API，回调，参数，组件等是否在当前版本可用。
			canIUse: uni.canIUse('button.open-type.getUserInfo'),
			bindUserInfo: null,

			radioValue: 0,
			isGetPhone: false
		};
	},

	onShow: function() {},
	onLoad(){
		uni.login({
				provider: 'weixin',
				
				success: res => {
					if (res.code) {
						//获取code存入缓存
						uni.setStorageSync('code', res.code);
					} else {
						uni.showToast({ title: '获取 code 失败', icon: 'none' });
					}
				},
				fail: () => {
					 uni.showToast({ title: '获取 code 失败', icon: 'none' });
					 return false;
				}
			})
	},
	methods: {
		
	getcode(){
		
		if(this.radioValue==0){
			uni.showToast({
				title: '请先阅读并勾选同意用户协议',
				icon: 'none'
			});
			return false;
		}
	
		
	},
		// 获取微信手机号码
		async getPhoneNumber(params) {
			
			if (this.radioValue != 1) {
				uni.showToast({
					title: '请先阅读并勾选同意用户协议',
					icon: 'none'
				});
				return false;
			}
			 if (params.detail.errMsg != "getPhoneNumber:ok") {
				 console.log('params==',params.detail.errMsg);
				console.log("用户拒绝授权进行拦截")
				 return false;
				 }
			//this.bindPhoneForWx(params.detail.iv, params.detail.encryptedData);
			let param = {
				code: uni.getStorageSync('code'),
				iv: params.detail.iv,
				encryptedData: params.detail.encryptedData,
				wxId: "101",
				pcode: uni.getStorageSync('pcode')
			};
			let data =await this.$apis.loginCode(param);
			console.log(data)
			if (data) {
				this.$store.commit('SET_USERINFO', data || {});
				// 前端自动登录
				this.$store.commit('SET_TOKEN', data.token);
				uni.navigateBack({
					delta: 1
				});
			}
		},

		phoneLogin() {
			this.$mRouter.push({
				route: this.$mRoutesConfig.loginPwd
			});
		},

		cancle() {
			uni.navigateBack({
				delta: 1
			});
		},

		radioGroup(e) {
			this.radioValue = e.detail.value;
		},
		
		toTerms() {
			this.$mRouter.push({
				route: this.$mRoutesConfig.userAgree
			});
		},
		
		toPrivacy() {
			this.$mRouter.push({
				route: this.$mRoutesConfig.privacy
			});
		},
		
	}
};
</script>

<style lang="scss">
/* 微信授权 */

.wx-auth {
	// height: calc(100vh);
	width: 100%;

	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 100%;
		height: 450rpx;
	}

	.header image {
		width: 260upx;
		height: 260upx;
	}

	.content2 {
		padding: 30upx 80upx;
	}

	.content2 text {
		display: block;
		color: $font-color-666;
		margin-top: 40rpx;
	}

	.btn {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.btn-auth {
		border-radius: 20rpx;
		margin-top: 50upx;
		font-size: 35rpx;
		width: 90%;
		background-color: $main-color;
		color: #ffffff;
	}

	.btn-get-phone {
		border-radius: 20rpx;
		margin-top: 50upx;
		font-size: 35rpx;
		width: 90%;
		background-color: $main-color;
		color: #ffffff;
	}

	.cancel-login {
		border-radius: 15rpx;
		margin: 70rpx 20rpx 50rpx 50rpx;
		font-size: 35rpx;
		background-color: #eeeeee;
		width: 30%;
	}
}

.bottom {
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: 500upx;

	.other-login {
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			color: $font-color-666;
		}

		.yzb-shoujisel {
			font-size: 100upx;
			color: $main-color;
		}
	}
	.agreement {
		margin-top: 50upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.agreement2{
			font-size: 28upx;
			color: #9B9B9B;
		}
		.agreement-text {
			text-decoration: underline;
			color: #12ae85;
			padding: 0 10upx;
			font-size: 28upx;
		}
	}
}
</style>
